<template>
  <div class="goods-introduce" :style="goodsIntroduceCss">
    <div :style="moduleBgCss" class="module-bg"></div>
    <section class="introduce-section">
      <div class="introduce-header">
        <div class="price-section">
          <div class="price-box">
            <div class="price">
              <span>¥</span>
              <span>399</span>
              <span>.00</span>
            </div>
            <div v-if="showMemberPrice" class="origin-price">
              <span>¥389.00</span>
              <img
                class="member-price-img"
                src="@/assets/images/diy/goodsDetail/member.png"
                alt=""
              />
            </div>
            <div v-if="showOriginPrice" class="old-price">¥165.00</div>
          </div>
          <!-- <div class="price-bottom-text">领立减60元优惠券，及12期免息券></div> -->
          <p class="sale-num">销量 1254</p>
        </div>
        <div class="share-section">
          <div class="price-bottom-text">领立减60元优惠券，及12期免息券></div>
          <div class="share-box">
            <i class="iconfont icon-share"></i>
            <span>分享</span>
          </div>
        </div>
      </div>
      <div class="goods-name">
        飞利浦（PHILIPS）SA1508 MP3 HIFI无损音 乐播放器 复读 录音 外放
        学生随身听 支持 128G扩展
      </div>
      <div class="goods-virtues">
        <div
          class="goods-virtues-item"
          v-for="(item, index) in [1, 2, 3]"
          :key="index"
        >
          <span></span>
          <p>支持外放</p>
        </div>
      </div>
      <div class="goods-grey-text">
        2英寸彩屏，可外放，高品质录音，正负8级变速播放，电子书/ 歌词显示
      </div>
    </section>
  </div>
</template>

<script>
import { mixinsModuleCss } from "@/components/DiyNew/diy/mixins/index.js";

export default {
  name: "",
  props: {
    propsData: {
      type: Object,
      default: {},
    },
  },
  mixins: [mixinsModuleCss],
  components: {},
  data() {
    return {};
  },
  mounted() {},
  watch: {},
  computed: {
    showMemberPrice() {
      return this.propsData.params.showMemberPrice;
    },
    showOriginPrice() {
      return this.propsData.params.showOriginPrice;
    },
    goodsIntroduceCss() {
      let style = JSON.parse(JSON.stringify(this.propsData.moduleCss));
      if (style.margin) style.margin = `${style.margin}px 0`;
      if (style.padding) style.padding = `0 ${style.padding}px`;
      if (style.borderRadius) style["borderRadius"] = `${style.borderRadius}px`;
      let obj = {
        margin: style.margin,
        borderRadius: style.borderRadius,
        padding: style.padding,
        position: "relative",
        overflow: "hidden",
      };
      return obj;
    },
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.goods-introduce {
  width: 100%;
  position: relative;
  font-family: PingFang SC;
  .introduce-section {
    width: 100%;
    padding: 10px 0 20px 18px;
    .introduce-header {
      width: 100%;
      .price-section {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        .price-box {
          display: flex;
          align-items: flex-end;
          .price {
            display: flex;
            align-items: flex-end;
            font-size: 17px;
            font-weight: 600;
            color: #f8260a;
            line-height: 21px;
            span:nth-child(2) {
              font-size: 28px;
              line-height: 28px;
            }
          }
          .origin-price {
            font-size: 14px;
            font-weight: 600;
            color: #232326;
            margin-left: 8px;
            .member-price-img {
              width: 30px;
              height: 12px;
              margin-left: 3px;
            }
          }

          .old-price {
            font-size: 14px;
            font-weight: 400;
            color: #8c8c8c;
            margin-left: 10px;
            text-decoration: line-through;
          }
        }
        .sale-num {
          font-size: 11px;
          font-weight: 400;
          color: #8c8c8c;
          padding-right: 18px;
          margin-bottom: 0;
          padding-top: 8 px;
        }
      }
      .share-section {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 6px;
        .price-bottom-text {
          font-size: 12px;
          color: #f8260a;
        }

        .share-box {
          width: 72px;
          height: 28px;
          background: #fdf1f0;
          border-radius: 60px 0px 0px 60px;
          justify-content: center;
          align-items: center;
          display: flex;
          .iconfont {
            font-size: 16px;
            color: #f8260a;
          }
          span {
            font-size: 12px;
            color: #262626;
            margin-left: 2px;
          }
        }
      }
    }
    .goods-name {
      padding-right: 18px;
      font-size: 16px;
      font-weight: 600;
      color: #262626;
      margin-top: 10px;
      word-break: break-all;
    }
    .goods-virtues {
      display: flex;
      align-items: center;
      margin-top: 2 px;
      .goods-virtues-item {
        display: flex;
        align-items: center;
        span {
          width: 2px;
          height: 2px;
          border-radius: 50%;
          background-color: #262626;
          display: inline-block;
        }
        p {
          font-size: 12px;
          color: #262626;
          margin-bottom: 0;
          margin-left: 5px;
          margin-right: 6px;
        }
      }
    }
    .goods-grey-text {
      margin-top: 12px;
      padding-right: 18px;
      font-size: 12px;
      font-weight: 400;
      color: #8c8c8c;
      word-break: break-all;
    }
  }
  .module-bg {
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
  }
}
</style>
